<template>
  <div class="wait-wrapper">
    <!-- <h1 class="mb-3">{{ obj.header }}</h1> -->
    <el-table
      :data="items"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="expand" label="查看订单" width="60">
        <template slot-scope="scope">
          <div class="expand-cell">
            <div class="d-flex mb-2">
              <div class="title mr-2">商品类别</div>
              <div>{{ scope.row.category }}</div>
            </div>
            <div class="d-flex">
              <div class="title mr-2">商品描述</div>
              <div v-html="scope.row.description"></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="order_no" label="订单号" width="110"></el-table-column>
      <el-table-column prop="create_user_name" label="买家账号" width="110"></el-table-column>
      <el-table-column prop="product_id" label="商品ID" min-width="150"></el-table-column>
      <el-table-column prop="title" label="商品标题" min-width="110"></el-table-column>
      <el-table-column prop="orderDetail" label="订单详情" min-width="150"></el-table-column>
      <el-table-column prop="num" label="下单数量" width="60"></el-table-column>
      <el-table-column prop="pay_amount" label="总价(元)" width="50"></el-table-column>
      <el-table-column prop="order_status_text" label="状态" width="90"></el-table-column>
      <el-table-column prop="remarks" label="取消原因" width="120" v-if="obj.orderStatus == 7"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
      <el-table-column prop="operation" label="操作" width="110" v-if="obj.btnText">
        <template slot-scope="scope">
          <el-button class="mb-2" type="primary" size="mini" @click="transpond(scope.row)">{{ obj.btnText }}</el-button>
          <el-button type="danger" size="mini" @click="showCancelDialog(scope.row)">取消订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 取消订单对话框 -->
    <el-dialog
      title="取消订单后无法恢复，款项将退给买家"
      :visible.sync="cancelDialogVisible"
      width="30%"
      @close="cancelDialogClosed"
      center
    >
      <el-form :model="cancelForm" :rules="cancelFormRules" ref="cancelFormRef" label-width="100px">
        <el-form-item label="请选择原因" prop="reason">
          <el-select
            v-model="cancelForm.reason"
            @change="cancelDialogChange"
            filterable
            allow-create
            clearable
            placeholder="请选择"
          >
            <el-option v-for="item in reasons" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelOrderConfirm()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="orderDescDialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderDescDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderDescDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域 -->
    <el-pagination
      background
      class="mt-3"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 10, 15]"
      :page-size="queryInfo.pagesize"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "OrderStatus",
  props: ["obj"],
  data() {
    return {
      items: [],
      orderDescDialogVisible: false,
      cancelDialogVisible: false,
      reasons: [
        { value: "订单信息填写不清楚", label: "订单信息填写不清楚" },
        { value: "商品缺货", label: "商品缺货" },
        { value: "有事耽误了，无法接单", label: "有事耽误了，无法接单" },
        { value: "其他原因", label: "其他原因" },
      ],
      cancelForm: {
        id: "",
        reason: "",
      },
      cancelFormRules: {
        reason: [{ required: true, message: "请选择原因", trigger: "change" }],
      },
      // 获取列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.fetch();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    async fetch() {
      const formData = new FormData();
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      formData.append("order_status", this.obj.orderStatus);
      const { data: res } = await this.$http.post("findOrderByPage", formData);
      // console.log(res, "所有订单");
      if (res.code != "0") return this.$message("获取订单失败");
      const orders = res.data.result;
      orders.forEach((item) => {
        item.orderDetail = "";
        JSON.parse(item.order_method).forEach((item1) => {
          item.orderDetail += item1.name + "：" + item1.value + "； ";
        });
        item.category1 ? (item.category = item.category1 + " / " + item.category2) : (item.category = item.category2);
      });
      const statusList = ["待付款", "已付款", "已受理", "处理完成", "取消", "退款", "商家取消订单"];
      orders.forEach((item) => {
        item.order_status_text = statusList[+item.order_status - 1];
        item.totalPrice = item.num * item.price;
      });
      this.items = orders;
      this.total = res.data.totalCount;
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      //console.log(newSize)
      this.queryInfo.pagesize = newSize;
      this.fetch();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      //console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.fetch();
    },
    showCancelDialog(row) {
      this.cancelForm.id = row.id;
      this.cancelDialogVisible = true;
    },
    cancelDialogClosed() {
      this.$refs.cancelFormRef.resetFields();
    },
    cancelDialogChange(value) {
      // console.log(value);
    },
    // 确定取消订单
    cancelOrderConfirm() {
      this.$refs.cancelFormRef.validate(async (valid) => {
        if (!valid) return;
        const formData = new FormData();
        formData.append("id", this.cancelForm.id);
        formData.append("remarks", this.cancelForm.reason);
        const { data: res } = await this.$http.post("rejectionOrder", formData);
        // console.log(res);
        if (res.code != "0") return this.$message("操作失败");
        this.cancelDialogVisible = false;
        this.$message.success("操作成功");
        this.$router.push("/orders/cancel");
      });
    },
    transpond(row) {
      this[this.obj.btnExecFunc](row);
    },
    accept(row) {
      this.$confirm("确定受理订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const formData = new FormData();
          formData.append("id", row.id);
          const { data: res } = await this.$http.post("acceptedOrder", formData);
          // console.log(res, "受理");
          if (res.code != "0") return this.$message.error("操作失败！");

          this.cancelDialogVisible = false;
          this.$message.success("操作成功");
          this.$router.push("/orders/waitFinish");
        })
        .catch(() => {
          this.$message("已取消修改！");
        });
    },
    finish(row) {
      // console.log("完成");
      this.$confirm("确定完成订单吗？完成订单后，订单状态不可修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const formData = new FormData();
          formData.append("id", row.id);
          const { data: res } = await this.$http.post("finishOrder", formData);
          // console.log(res, "完成");
          if (res.code != "0") return this.$message.error("操作失败！");

          this.$message.success("操作成功");
          // 重新获取用户列表数据
          this.fetch();
        })
        .catch(() => {
          this.$message("已取消修改！");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.wait-wrapper {
  .el-table {
    .cell {
      .el-button {
        + .el-button {
          margin-left: 0;
        }
      }
    }
  }
}
</style>
